<template>
    <el-input v-model="value" 
        :resize="resize" 
        :autosize="autosize" 
        :rows="rows" 
        show-word-limit 
        type="textarea" 
        :maxlength="maxLength" 
        :placeholder="`请输入${label}`" 
        :disabled="disabled" 
        :style="domCss" 
        @input="Change('change')" 
        @blur='Change("blur")' 
        @focus='Change("focus")'>
    </el-input>
</template>

<script>
export default {
    props:{
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: ''
        },
        maxLength: {
            type: Number,
            default: 500
        },
        rows:5,
        autosize:false,
        resize:"none",
        defaultValue: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            value:'',
        }
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.value = v
            }
        }
    },
    methods: {
        Change(type){
            this.$emit('EventHandler',type,this.$attrs.prop,this.value);
        },
    },
}
</script>

<style lang="scss" scoped>

</style>